<template>
  <div class="main">
    <swiper class="swiper1" ref="mySwiper" :options="swiperOptions">
      <swiper-slide class="h-100">
        <img class="w-100 h-100" src="../assets/slider01.jpeg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/slider02.jpeg" alt="" />
      </swiper-slide>
      <div class="swiper-pagination text-right pagination-home " slot="pagination"></div>
    </swiper>
    <div class="nav-icons my-4 flex flex-wrap bg-white text-center">
      <div class="nav-item pt-1 pb-1 my-3" v-for="n in 10" :key="n">
        <i class="sprite sprite-1"></i>
        <div class="text">爆料站</div>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <c-list-card class="card" title="新闻资讯" :data="newsData">
      <template #body="{caterory}">
        <div class="flex jc-between fs-xs py-1" v-for="(item, i) in caterory.lists" :key="i">
          <div class="left">
            <span>[{{ item.categoryName }}]</span>
            <span>|</span>
            <span>{{ item.title }}</span>
          </div>
          <span>{{ item.data }}</span>
        </div>
      </template>
    </c-list-card>
  </div>
</template>
<script>
import ListCard from '@/components/ListCard.vue';
export default {
  components: {
    'c-list-card': ListCard,
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.pagination-home',
        },
      },
      newsData: [
        {
          name: '热门',
          lists: new Array(5).fill({}).map((v) => ({
            categoryName: '公告',
            title: 'shhahahahahah',
            data: '07/12',
          })),
        },
        {
          name: '新闻',
          lists: new Array(5).fill({}).map((v) => ({
            categoryName: '新闻',
            title: 'shhahahahahah',
            data: '07/12',
          })),
        },
        {
          name: '公告',
          lists: new Array(5).fill({}).map((v) => ({
            categoryName: '公告',
            title: 'shhahahahahah',
            data: '07/12',
          })),
        },
        {
          name: '活动',
          lists: new Array(5).fill({}).map((v) => ({
            categoryName: '活动',
            title: 'shhahahahahah',
            data: '07/12',
          })),
        },
        {
          name: '赛事',
          lists: new Array(5).fill({}).map((v) => ({
            categoryName: '赛事',
            title: 'shhahahahahah',
            data: '07/12',
          })),
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.swiper1 {
  height: 13.75rem;
}

.nav-icons {
  border-bottom: 1px solid #9999;
  border-top: 1px solid #9999;
  .nav-item {
    width: 25%;
    border-left: 2px solid #edeff1;
    &:nth-child(4n + 1) {
      border-left: none;
    }
  }
}

.card {
  .nav {
    height: 3rem;
    .nav-link {
      border-bottom: 2px solid transparent;
      &.active {
        border-bottom: 2px solid #db9e3f;
      }
    }
  }
}
</style>
